import React, { Component } from 'react';
import Commodity1 from './commodityShow';
import Commodity2 from './commodityShow1';
import Commodity3 from './commodityShow2';
import Commodity4 from './commodityShow3';
import Commodity5 from './commodityShow4';
import Commodity6 from './commodityShow5';

let style = {
    bigComShow: {
        'margin': '20px auto',
        'height': '980px',
        'width': '1200px',
        // 'fontSize': '0'
        // 'backgroundColor':'pink',
    },
}
let arrs = [
    { 'ModuleName': <Commodity1 /> },
    { 'ModuleName': <Commodity2 /> },
    { 'ModuleName': <Commodity3 /> },
    { 'ModuleName': <Commodity4 /> },
    { 'ModuleName': <Commodity5 /> },
    { 'ModuleName': <Commodity6 /> },
]
class BigCommodityShow extends Component {
    
    render() {
        const { divs } = this.props
        return (
            <div className='bigComShow' style={style.bigComShow}>
                {divs.ModuleName}
            </div>
        )
    }
}

class ForBigCommodityShow extends Component {
    render() {
        return (
            <div>
                {arrs.map((divs, index) => <BigCommodityShow divs={divs} key={index} />)}
            </div>
        )
    }
}

export default ForBigCommodityShow;